@font-face {
	font-family: 'SourceHanSans';
	src:
    url('../family/SourceHanSansCN-Regular.otf'),
    url('../family/SourceHanSansCN-Light.otf'),
    url('../family/SourceHanSansCN-Normal.otf');
	font-weight: 400;
}

@font-face {
	font-family: 'Login';
	src: url('../family/login.ttf');
	font-weight: 400;
}

:root {
	--primary-color: #4c59c6;
	--info-color: #6373ee;
	--danger-color: #ff243b;
	--h-color: #ffffff;
}
@mixin tooltip {
	//tooltip
	.el-tooltip__popper.is-dark {
		background: rgba(0, 0, 0, 0.3) !important;
		box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.5);
		border-radius: 8px;
		padding: 14px;
	}
}

@mixin card {
	min-height: 100vh;
	//box-shadow: 0 3px 3px 1px rgba(0, 0, 0, 0.05);
	box-shadow: none;
}

.app-main {
	//card
	.page-card,
	.page-form-card {
		box-shadow: none;
		border: none;
		border-radius: 0;

		.el-card__body {
			padding: 24px 32px;
		}
	}

	.page-form-card {
		@include card;
		.el-card__body {
			padding: 32px 32px 0;
		}
		.el-form-item__label {
			font-size: 12px;
			font-family: Microsoft YaHei-Regular, Microsoft YaHei;
			font-weight: 400;
			color: #333333;
		}
		.el-input__inner {
			height: 35px;
			line-height: 35px;
		}
		.el-input-number .el-input__inner:hover {
			border-color: #dcdfe6;
		}
		.el-input-number__increase,
		.el-input-number__decrease {
			top: 2px;
			background: #4c59c6;
			color: #ffffff;
			width: 49px;
			height: 35px;
		}
		.el-left {
			.el-form-item__label {
				text-align: left;
				float: none;
				word-break: break-word;
			}
			.el-form-item__content {
				margin-left: 0 !important;
			}
		}
	}

	.page-card {
		@include card;
    .el-table{
      margin-top: 20px;
    }

		.el-card__header {
			padding: 20px 32px 2px !important;
			border-bottom: none !important;
			.el-form {
				//border-bottom: 1px solid #f3f4f7;
			}
			.el-input__icon {
				line-height: 36px;
			}
			.el-date-editor .el-range__icon {
				line-height: 26px !important;
			}
			.el-form-item__content {
				line-height: 36px;
			}
			.el-form-item__label {
				font-size: 14px;
				color: #333333;
				line-height: 36px !important;
				font-weight: 400;
			}

			.el-input {
				width: 240px !important;
				height: 36px;
				line-height: 36px;
			}


			.el-form--inline .el-form-item {
				vertical-align: bottom;
				margin-bottom: 20px;
			}

			.el-input__inner,
			.el-date-editor {
				border: 1px solid #e2e6f0;
				//background: #F8F9FB;
				border-radius: 4px;
				color: #333333;
				font-size: 14px;
				font-weight: 400;
				height: 36px !important;
				line-height: 36px !important;

				&::placeholder {
					color: #999999;
				}
			}
			.el-date-editor .el-range-separator {
				line-height: 36px !important;
				height: 36px !important;
			}

			.el-form--inline .el-form-item {
				margin-right: 64px;
			}


			.page-search-btn {
				height: 36px;
				display: flex;
				align-items: center;
				.el-button {
					min-width: 100px;
					line-height: 36px;
					height: 36px !important;
					padding-top: 0;
					padding-bottom: 0;
				}
				.is-plain {
					background-color: transparent !important;
					&:hover,
					&:active,
					&:focus {
						color: #4c59c6;
						background: #edeef9;
						border-color: #b7bde8;
					}
				}
			}
			.table-action {
				.el-button {
					min-width: 56px !important;
					width: 56px !important;
					height: 28px !important;
					line-height: 28px !important;
					border-radius: 4px;
				}
			}
		}

		.el-card__body {
			padding: 0 32px 32px !important;
		}
		.page-card-options {
			//margin-bottom: 32px;
			.el-button {
        &:last-child{
          margin-right: 0;
        }
        @media (max-width: 767px) {
           margin-bottom: 12px;
          margin-left: 0 !important;
          margin-right: 12px;
         }
				i {
					margin-right: 4px;
				}
			}
		}
		.page-search-date {
			.el-date-editor .el-range-input {
				border: none !important;
			}
		}
		.el-table {
			.table-action {
				.el-button {
					background-color: transparent !important;
					border: none !important;
					color: var(--primary-color);
					padding: 0;
					font-size: 14px;
					font-weight: 400;
				}
        .el-button--danger{
          color: #F14A46;
        }
			}
		}

    @media (max-width: 768px) {
      min-width: auto !important;
      .el-card__header {
        padding: 20px 10px 2px !important;
        .el-input,.el-date-editor{
          width: 200px !important;
        }
        .el-form--inline .el-form-item{
          margin-right: 0;
        }
      }
    }
    .el-card__body{
      padding: 0 10px 32px;
    }
	}

	.page-h-full {
		min-height: 100vh;
	}

	.page-container {
		min-height: 100vh;
		background-color: #f7f7f7;
		.sortOrder {
			min-width: auto !important;
			height: auto !important;
			line-height: initial !important;
		}

		.el-input .el-input__count {
			color: #333333;
		}

		.vue-draggable .uploadBox {
			margin: 0;
		}

		.ql-toolbar.ql-snow {
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
		}

		.ql-toolbar.ql-snow,
		.ql-container.ql-snow {
			border: 1px solid #e5e5e5;
		}

		.ql-container.ql-snow {
			border-bottom-left-radius: 8px;
			border-bottom-right-radius: 8px;
		}

		// 表格
		.el-table {
			border-radius: 10px;
			border: 1px solid #eef1f8;
		}

		.el-table th.is-leaf,
		.el-table td {
			border: none;
		}

		.el-table .el-table__header-wrapper th,
		.el-table .el-table__fixed-header-wrapper th {
			background-color: #f8f9fb;
			height: 40px;
			color: #495361;
			font-size: 12px;
		}

		.el-table th,
		.el-table td {
			//height: 40px;
			font-size: 12px;
			padding: 0;
			.cell {
				font-size: 12px;
				font-family: SourceHanSans;
				color: #333333 !important;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
			}
		}

		.el-table--striped .el-table__body tr.el-table__row--striped td {
			background-color: #f8f9fb;
		}

		.el-table__body tr.hover-row > td {
			background-color: #e7e8f2;
		}

		.el-button + .el-button {
			margin-left: 12px;
		}

		.el-table {
			&::before,
			.el-table__fixed::before,
			.el-table__fixed-right::before {
				display: none;
			}
		}
		.page-card-options {
      display: flex;
      align-items: center;
			.el-button {
				min-width: 100px !important;
				width: 100px;
				padding: 0;
				line-height: 36px !important;
				border-radius: 4px !important;

				span {
					margin-left: 0;
				}
			}
			.el-button + .el-button {
				margin-left: 12px;
			}
		}
	}

	.pagination-container {
		.el-pagination__editor.el-input {
			width: 50px !important;
		}

		.el-pagination .el-select .el-input {
			width: 100px !important;
		}
	}
}

.modal-dialog {
	padding: 18px 28px;
	@include tooltip;
	.page-modal-search {
		display: flex;
		align-items: center;
		.el-button {
			width: 100px;
			height: 42px;
			line-height: 42px;
			padding: 0;
		}
	}
	.vue-draggable .uploadBox {
		margin: 0 !important;
	}

	.el-dialog__header {
		padding: 0;
	}

	.el-dialog__title {
		font-size: 14px;
		font-weight: bold;
		font-family: Microsoft YaHei;
	}

	.el-dialog__headerbtn .el-dialog__close {
		color: #2c333f;
	}

	.el-dialog__body {
		padding: 32px 0 0;

		.el-form-item__label {
			color: #333333;
			font-weight: 400;
		}

		.el-form {
			.el-input {
				width: 299px;
				max-width: 299px;
			}
			.el-left {
				.el-form-item__label {
					text-align: left;
					float: none;
					word-break: break-word;
				}
				.el-form-item__content {
					margin-left: 0 !important;
				}
			}

			.el-input-full {
				width: 100%;
				max-width: 100%;
				.el-input {
					width: 100%;
					max-width: 100%;
				}
			}
			.el-input-240 {
				.el-input {
					width: 240px;
					max-width: 240px;
				}
			}

			.el-input-number {
				width: 299px;

				.el-input-number.is-controls-right .el-input-number__decrease {
					right: 0;
				}
			}
		}

		.el-input__inner {
			border: 1px solid #e5e5e5;
		}

		.el-input.is-disabled .el-input__inner {
			border: none;
			background-color: #f7f7f7;
			color: #333333;
		}
	}
}

//删除弹窗
.modal-remove-dialog {
	.el-dialog {
		padding: 32px;
	}

	.el-dialog__footer {
		padding: 0;
	}
}

//统计数字
.el-textarea .el-input__count,
.el-input__count-inner {
	color: #333333;
}

.el-tooltip__popper.tips {
	background-color: rgba(0, 0, 0, 0.5);
	.popper__arrow {
		border-top-color: rgba(0, 0, 0, 0.5) !important;
		&::after {
			border-top-color: rgba(0, 0, 0, 0.5) !important;
		}
	}
}
